<!--组件-榜单Cell-->
<template>
  <div class="cell bg2" @click="cellClick()" >
    <template v-if="isShow">

      <!--排序-->
      <LImage class="img-order" :src="Config.img('v2_ranking_' + (index + 1) + '.png')"></LImage>
      
      <!--策略信息-->
      <div class="row acenter">

        <div class="all">
          <div class="row acenter">
            <text class="font32 text1 width300">{{item.followName ? T(item.followName) : T(item.strategyName)}}</text>
            
            <div class="direction" v-if="item.isContract == 'spot'">
              <text class="font20 main-t1">{{T('币币')}}</text>
            </div>

            <div :class="['direction', Config.upDownBg(item.contract_num, 'direction-red', 'direction-green')]" v-else>
              <text :class="['font20', Config.upDownFont(item.contract_num),]">{{item.contract_show}}</text>
            </div>
          </div>

          <div class="exchange">
            <text class="font24 text3">{{getExchangeName(item)}}</text>
          </div>
        </div>
        

        <div class="but main-b1 mr10" @click="copyClick">
          <text class="font28 main-t1">{{T('复制')}}</text>
        </div>
        
        <div class="but main-b1" v-if="item.isOpenFollow" @click="followClick()">
          <text class="font28 main-t1">{{T('跟单')}}</text>
        </div>
        <div class="but no-b1" v-else>
          <text class="font28 no-t1">{{T('未开放')}}</text>
        </div>
      </div>
      
      <!--运行信息-->
      <div class="height30"></div>

      <div class="row">
        <text class="text font34 text2 all">{{item.investCoinnNum}}</text>
        <div class="width10"></div>
        <text class="text font34 text2 all">{{item.realEarnings}}</text>    
        <div class="width10"></div>        
        <text :class="['text', 'font34', 'all', 'tRight', Config.upDownFont(item.realYearIncome)]">{{item.realYearIncome+'%'}}</text>
      </div>
      <div class="row">
        <text class="font24 text3 all">{{T('总投入') + '(' + item.investCoin + ')'}}</text>  
        <div class="width10"></div>       
        <text class="font24 text3 all">{{T('总收益') + '(' + item.investCoin + ')'}}</text>  
        <div class="width10"></div>        
        <text class="font24 text3 all tRight">{{T('年化收益率')}}</text>
      </div>

      <!--用户信息-->
      <div class="height10"></div>        
      <div class="user">
        <LImage class="img-head bg3" :src="item.avatar ? item.avatar : Config.img('view_image_portrait_normal.png')"></LImage>
        <text class="font22 text3">{{item.nickName}}</text>
        <div class="all"></div>
        <text class="font22 text3">{{getExecuteTime(item.startTime)}}</text>
      </div>
    </template>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.cell{
  border-radius: 24px;
  
  padding: 40px;
  padding: 40px 40px 20px 40px;
}
.but{
  justify-content: center;
  align-items: center;
  height: 56px;
  min-width: 144px;
  border-radius: 56px;
  border-width: 1px;

  padding-left: 30px;
  padding-right: 30px;

  margin-left: 10px;
}
.text {
  lines: 2;
  text-overflow: ellipsis;
}
.img-order{
  position: absolute;
  width: 46px;
  height: 32px;
  border-top-left-radius: 24px;
  border-bottom-right-radius: 24px;

  left: 0;
  top: 0;
}
.img-head{
  width: 32px;
  height: 32px;

  border-radius: 16px;
  margin-right: 10px;
}

/*********************** 策略方向 类型*/
.direction {
  justify-content: center;
  background-color: rgba(22, 119, 254, 0.12);
  height: 32px;
  border-radius: 6px;

  padding-left: 10px;
  padding-right: 10px;

  margin-left: 10px;
}
.direction-green{
  background-color: rgba(0, 173, 136, 0.12);
}
.direction-red{
  background-color: rgba(240, 56, 105, 0.12);
}

/*********************************** 策略信息*/
.exchange {
  flex-direction: row;
  align-items: center;
}

/*********************************** 间距*/
.user {
  flex-direction: row;
  align-items: center;
  padding-bottom: 20px;
  padding-top: 20px;
}
/*********************************** 间距*/
.width300 {
  max-width: 300;
  lines: 1;
  text-overflow: ellipsis;
}
</style>

<script>
//功能
import jconfig from "@/_js/config";
import jmath from "@/_js/math";
import jtime from "@/_js/time";

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {

  props: {
    item: Object, 
    index: Number,
  },

  data() {
    return {
      T: T,
      Config:jconfig,
      isShow:false,
    };
  },

  created() {
    jconfig.init(()=>{
      this.isShow = true;
    },[jconfig.OPT_UP_DOWN]);
  },

  methods: {

    /********************************** 获取数据*/
    //获取执行时间
    getExecuteTime(startTime){
      var style = 'dd'+T('天')+'HH'+T('时')+'mm'+T('分');
      var time = jtime.getTimeLength(startTime, undefined, style)
      return time;
    },

    //获取交易所名称
    getExchangeName(item) {
      
      var str;
      if (jmath.toString(item.childCount) > 0) {
        str = T('多币对') + item.childCount;
      } else if (item.isContract == 'spot') {
        str = item.counterCoin + '/' + item.baseCoin;
      } else {
        str = item.counterCoin + T('永续') + '/' + item.baseCoin;
      }
      var exchangeName = item.exchangeName + '（' + str + '）';
      return exchangeName;
    },
    
    /********************************** 点击触发*/
    //详情
    cellClick() {
      this.$emit("click", this.item);
    },

    //用户
    userClick() {
      this.$emit("user", this.item);
    },

    //复制
    copyClick() {
      this.$emit("copy", this.item);
    },

    //跟单
    followClick() {
      this.$emit("follow", this.item);
    },
  },
};
</script>

